<template>
	<view class="integralMall">
		<view class="pageBg">
			<view class="bgTop">
				<image class="bgimg" src="/bundle/static/image/integralBg.png" mode="widthFix"></image>
				<view class="topCon ">
					<view class="clearfix" style="padding: 24rpx;">
						<view class="fl" v-if="userInfo.level!==1" style="margin-right: 60rpx;">
							<view class="valTxt"><text class="smallTxt">成长值：</text>{{user_growth}}</view>
							<view class="valTxt"><text class="smallTxt">冻结成长值：</text>{{freeze_growth}}</view>
						</view>
						<view class="fl" >
							<view class="valTxt"><text class="smallTxt">可用积分：</text>{{integral}}</view>
							<!-- <view class="valTxt"><text class="smallTxt">冻结积分：</text>{{freeze_integral}}</view> -->
						</view>
						<view class="descBtn fr">
							<router-link class="" :to="{path: '/pages/index/integral_details'}">
								<image src="/bundle/static/image/integralDesc.png" class="integralDesc" mode="widthFix"></image>
							</router-link>
						</view>
					</view>
				</view>
			</view>
			<view class="pad24">
				<view class="itemBox">
					<view class="clearfix">
						<view class="i-title fl">兑视频会员</view>
						<!-- <view class="fr"><text class="moreTxt">做任务赢积分</text><uni-icons type="right" size="16" color="#666666"></uni-icons></view> -->
					</view>
					<view class="i-list clearfix">
						<view class="i-l-item" v-for="item in quanyiGoodsList2" @click="apifun.navigate('/bundle/pages/integralMallList?typeId='+item.id)">
							<image :src="item.photo" class="i-img"></image>
							<view class="i-i-txt">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="itemBox">
					<view class="clearfix">
						<view class="i-title fl">兑音频娱乐会员</view>	
						<!-- <view class="fr"><text class="moreTxt">做任务赢积分</text><uni-icons type="right" size="16" color="#666666"></uni-icons></view> -->
					</view>
					<view class="i-list clearfix">
						<view class="i-l-item" v-for="item in quanyiGoodsList3" @click="apifun.navigate('/bundle/pages/integralMallList?typeId='+item.id)">
							<image :src="item.photo" class="i-img"></image>
							<view class="i-i-txt">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="itemBox">
					<view class="clearfix">
						<view class="i-title fl">兑生活服务会员</view>	
						<!-- <view class="fr"><text class="moreTxt">做任务赢积分</text><uni-icons type="right" size="16" color="#666666"></uni-icons></view> -->
					</view>
					<view class="i-list clearfix">
						<view class="i-l-item" v-for="item in quanyiGoodsList4" @click="apifun.navigate('/bundle/pages/integralMallList?typeId='+item.id)">
							<image :src="item.photo" class="i-img"></image>
							<view class="i-i-txt">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="itemBox clearfix">
					<view class="i-left fl" v-for="item in quanyiGoodsList5" @click="apifun.navigate('/bundle/pages/integralMallList?typeId='+item.id)">
						<view style="padding: 30rpx 30rpx 0rpx;">
							<view class="i-i-title">兑话费</view>
							<view class="i-i-title2">手机话费等你来兑</view>
							<view style="text-align: right;">
								<image src="/bundle/static/image/duihuan1.png" style='width: 96rpx;' mode="widthFix"></image>
							</view>
						</view>
					</view>
					<!-- <view class="i-left i-right fr">
						<view style="padding: 30rpx 30rpx 0rpx;">
							<view class="i-i-title">兑流量</view>
							<view class="i-i-title2">流量优惠券等你来兑</view>
							<view style="text-align: right;">
								<image src="/bundle/static/image/duihuan2.png" style='width: 80rpx;' mode="widthFix"></image>
							</view>
						</view>
					</view> -->
					
				</view>

				<view class="itemBox">
					<view class="clearfix">
						<view class="i-title fl">兑实物</view>	
						<!-- <view class="fr"><text class="moreTxt">做任务赢积分</text><uni-icons type="right" size="16" color="#666666"></uni-icons></view> -->
					</view>
					<view class="list clearfix">
						<view class="item" v-for="item in goodsLists">
							<router-link :to="`/pages/mall/integral_goods_details?id=${item.id}`">
								<image class="itemImg" :src="item.image" mode="aspectFill" />
								<view class="itemName">{{item.name}}</view>
								<view class="itemPrice">{{item.need_integral}}<text>积分</text><text v-if="item.exchange_way==2">+{{item.need_money}}成长值</text></view>
								<image src="/bundle/static/image/goodsGo.png" class="goodsGo" mode="widthFix"></image>
							</router-link>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="lookMore">~下拉显示更多~</view> -->
		</view>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	import {
		getIntegralGoods
	} from '@/api/activity'
	import customSwiper from '@/components/blackmonth-swiper/index'
	import {
		integralGoodsType
	} from "@/api/store"
	export default {
		components: { customSwiper },
		data() {
			return {
				quanyiGoodsList2:[],
				quanyiGoodsList3:[],
				quanyiGoodsList4:[],
				quanyiGoodsList5:[],
				goodsLists:[],
				integral:0,
				freeze_integral:0,
				user_growth:0,
				freeze_growth:0,
			}
		},
		onLoad() {
			this.getGoodsList()
			this.getIntegralGoodsType(2)
			this.getIntegralGoodsType(3)
			this.getIntegralGoodsType(4)

			this.getIntegralGoodsType(5)
			
		},
		computed: {
		    ...mapGetters(["userInfo", "appConfig"]),
		},
		methods: {
			getIntegralGoodsType(type){
				integralGoodsType({
					type:type
				}).then(res => {
					if (res.code == 1) {
						const {
							goods,
						} = res.data
						if(type==2){
							this.quanyiGoodsList2 = goods
						}else if(type==3){
							this.quanyiGoodsList3 = goods
						}else if(type==4){
							this.quanyiGoodsList4 = goods
						}else if(type==5){
							this.quanyiGoodsList5 = goods
						}
					}
				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			getGoodsList(){
				getIntegralGoods({
				}).then(res => {
					if (res.code == 1) {
						const {
							goods,
							user_integral,
							freeze_integral,
							user_growth,
							freeze_growth
						} = res.data

						this.integral = user_integral
						this.freeze_integral = freeze_integral
						this.user_growth = user_growth
						this.freeze_growth = freeze_growth
						this.goodsLists = goods.lists
					}
				}).catch(() => {
					//this.mescroll.endErr();
				})
			},
		}
	}
</script>

<style scoped>
	.pageBg{
		background-color: #F4F4F4;
	}
   	.bgTop{
		position: relative;
		height: 180rpx;
	}
	.bgimg{
		width: 100%;
	}
	.topCon{
		position: absolute;
		top: 20rpx;
		width:750rpx;
	}
	.valTxt{
		font-size: 36rpx;
		font-weight: bold;
		color: #5F3016;

	}
	.smallTxt{
		font-size: 24rpx!important;
	}
	.pad24{
		padding: 0 24rpx;
	}
	.itemBox{
		position: relative;
		z-index: 9;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
	}
	.i-i-txt{
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #333;
	}
	.moreTxt{
		color: #999;
		font-size: 26rpx;
	}
	.i-title{
		color: #333;
		font-size: 32rpx;
	}
	.i-list{
		margin-top: 40rpx;
	}
	.i-l-item{
		width: 20%;
		text-align: center;
		display: inline-block;
		margin-bottom: 30rpx;
	}
	.i-img{
		width: 80rpx;
		height: 80rpx;
	}
	.itemImg{
		width: 86%;
		height: 250rpx;
	}
	.list{
		padding: 20rpx 0;
	}
	.item{
		text-align: center;
		margin-bottom: 26rpx;
		background-color: #fff;
		border-radius: 22rpx;
		box-shadow: 1px 2px 9px 3px rgba(224,222,222,0.3);
		width: 310rpx;
		float: left;
		padding: 30rpx 0 20rpx;
	}
	.item:nth-child(even){
		float: right;
	}
	.itemName{
		line-height: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		color: #000;
	}
	.goodsGo{
		width: 116rpx;
	}
	.itemPrice{
		padding: 0rpx 0rpx 10rpx;
		font-size: 26rpx;
		color: #AA754E;		
	}

	.lookMore{
		padding: 10rpx 0 30rpx;
		text-align: center;
		font-size: 23rpx;
		color: #898A8B;
	}
	.integralDesc{
		vertical-align: middle;
		width: 158rpx;
	}
	.descBtn{
		margin-top: 40rpx;
	}
	.descTxt{
		margin-left: 8rpx;
		font-size: 26rpx;
		color: #f5335e;
	}
	.i-left{
		margin-right: 10rpx;
		width: 316rpx;height: 228rpx;
		border-radius: 28rpx;
		background: linear-gradient(90deg, #FFF6F9 0%, #FEF3F7 100%);
	}
	.i-left:nth-child(even){
		margin-right: 0;
	}
	.i-right{
		background: linear-gradient(90deg, #FCF9E8 0%, #FEF4DB 100%);
	}
	.i-i-title{
		font-size: 33rpx;
		color: #000000;
	}
	.i-i-title2{
		font-size: 23rpx;
		color: #9F998C;
		margin:10rpx 0;
	}
</style>
